<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
    <style>
		a {
			text-decoration: none;
		}
		a:hover {
			text-decoration: none;
		}
		.img {
			display: flex;
			flex-wrap: wrap;
		}
		.img img{
			width: 210px;
			height: 210px;
			object-fit: cover;
			margin: 15px;
		}
		.form-control {
			height: auto;
		}
		#cboxClose{
			text-indent: 0;
			font-size: 50px;
			font-weight: bold;
			margin-top: 10px;
			color: red;
		}
		.ace-thumbnails li {
			margin: 0 10px;
		}
    </style>
	<div class="page-header">
		<h1><?=isset($remark) ? '编辑德育评价' : '发布德育评价'?></h1>
	</div>
	<div class="col-xs-12">
		<form class="form-horizontal">
            <input type="hidden" name="id" value="<?=isset($remark) ? $remark['id'] : 0?>" />
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">学生名称：</label>
				<div class="col-sm-6">
					<select class="chosen-select form-control tag-input-style" data-placeholder="选择学生" name="student_id">
						<?php foreach($studentList as $student): ?>
							<option value="<?=$student['id']?>" <?= isset($remark) && $student['id'] == $remark['student_id'] ? 'selected' : '' ?>><?=$student['realname']?></option>
						<?php endforeach; ?>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">评价结果：</label>
				<div class="col-sm-6">
					<select class="chosen-select form-control tag-input-style" data-placeholder="选择结果" name="result_id">
						<?php foreach($resultList as $result): ?>
							<option value="<?=$result['id']?>" <?= isset($remark) && $result['id'] == $remark['result_id'] ? 'selected' : '' ?>><?=$result['title']?></option>
						<?php endforeach; ?>
					</select>
				</div>
			</div>
            <div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">评价内容：</label>
				<div class="col-sm-6">
					<textarea class="pd0" id="content" name="content" style="height: 300px;width: 100%"><?=isset($remark) ? urldecode($remark['content']) : ''?></textarea>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">证明材料：</label>
				<div class="col-sm-6">
					<div class="form-control">
						<div class="img">
							<ul class="ace-thumbnails clearfix">
								<li>
									<a href="javascript:;" id="upload-img" style="height: 240px;">
										<img class="fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" />
									</a>
								</li>
								<?php if(isset($remark['imgArr'])): ?>
									<?php foreach($remark['imgArr'] as $image): ?>
										<li>
											<a href="<?=$image?>" data-rel="colorbox" class="cboxElement">
												<img class="img-material" src="<?=$image?>" width="150" height="150" class="fit-cover">
												<div class="text">
													<div class="inner"></div>
												</div>
											</a>
											<div class="tools tools-bottom">
												<a href="javascript:;" class="red image-delete">
													<i class="ace-icon fa fa-trash"></i>
												</a>
											</div>
										</li>
									<?php endforeach; ?>
								<?php endif ?>		
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="clearfix">
				<div class="col-md-offset-3 col-md-9">
					<a class="btn btn-info submit" type="submit">
						<i class="ace-icon fa fa-check"></i> 提交
					</a>
				</div>
			</div>
		</form>
	</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<!-- 百度编辑器 -->
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.config.js"></script>
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
	$(function(){
		// 上传图片对象
		$("#upload-img").uploader({
			"server":  '<?=UP_FORM_URL?>',
			"authorization": "<?=$signature?>",
			"policy": "<?=$policy?>",
			"callback": function(response) {
				var imgFile = "<?=UP_URL?>" + response.url;
				$(".ace-thumbnails").append('\
					<li>\
						<a href="' + imgFile + '" data-rel="colorbox" class="cboxElement">\
							<img class="img-material" src="' + imgFile + '" width="150" height="150" class="fit-cover">\
							<div class="text">\
								<div class="inner"></div>\
							</div>\
						</a>\
						<div class="tools tools-bottom">\
							<a href="javascript:;" class="red image-delete">\
								<i class="ace-icon fa fa-trash"></i>\
							</a>\
						</div>\
					</li>\
				');
				$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
			}
		});
		// 初始化编辑器
		var ue = UE.getEditor('content');
		$(".submit").click(function() {
			var id = $("[name=id]").val();
			var studentId = $("[name=student_id]").val();
			var resultId = $("[name=result_id]").val();
			var content = $("[name=content]").val();
			var imgArr = new Array();
			$(".ace-thumbnails .img-material").each(function() {
				if($(this).css('display') != 'none') {
					imgArr.push($(this).attr("src"));
				}
			});
			var url = "<?=admin_url('moral/save_remark_action')?>";
			var data = {
				"id": id,
				"student_id": studentId,
				"result_id": resultId,
				"content": content,
				"material": imgArr
			};
			ajax_post(url, data, function() {
				window.location.href = "<?=admin_url('moral/remark')?>";
			});
		});

		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		// 删除图片
		$("body").on("click", ".image-delete", function(e){
			var that = $(this);
			layer.confirm('确定删除该图片吗？', function(index){
				that.parents("li").find(".img-material").hide();
				layer.close(index);
			});
		})
	})
</script>